<template>
  <el-container>
    <el-header style="border-bottom: 2px solid #dee2e7">
      <h2 style="color: #50b4ff">现病史</h2>
    </el-header>
    <el-main style="padding: 0;height:100%">
      <div class="row-div">
        <div class="left-div">
          <span>目前情况</span>
          <el-checkbox v-model="tempOpen.HPI.situation.ifNull">无</el-checkbox>
        </div>
        <div class="right-div">
          <el-form ref="form" label-width="80px">
            <el-form-item label="发病日期">
              <el-date-picker :disabled="tempOpen.HPI.situation.ifNull" v-model="tempOpen.HPI.situation.date" type="date" placeholder="选择日期" size="medium" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="诱因">
              <el-select filterable :disabled="tempOpen.HPI.situation.ifNull" size="medium" v-model="tempOpen.HPI.situation.cause" multiple placeholder="请选择">
                <el-option v-for="(e, i) in dict.simple.DTMPI010" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
                <!-- <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="主诉">
              <!-- <el-input size="medium" :value=""></el-input> -->
              <div style="line-height: 25px" v-html="parseChiefComplaint(tempOpen.chiefComplaint, dictIndex)"></div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="row-div">
        <div class="left-div">
          <span>检查化验</span>
          <el-checkbox v-model="tempOpen.HPI.unusual.ifNull">无</el-checkbox>
        </div>
        <div class="right-div">
          <div class="card-div" v-if="tempOpen.HPI.unusual.data && tempOpen.HPI.unusual.data.length > 0">
            <el-collapse v-model="activeNames">
              <el-collapse-item v-for="(h, hi) in tempOpen.HPI.unusual.data" :key="hi" :title="h.name" :name="hi.toString()">
                <table style="width:100%;">
                  <tr v-for="(d, di) in h.data" :key="di" :class="d.unusual ? 'unusual' : ''">
                    <td>{{ d.itemName }}</td>
                    <td>{{ d.resultValue + '(' + d.startRange + '-' + d.endRange + ')' + d.resultUnit }}</td>
                    <td>{{ h.dateTime }}</td>
                  </tr>
                </table>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <div class="row-div">
        <div class="left-div">
          <span>治疗情况</span>
          <el-checkbox v-model="tempOpen.HPI.treatment.ifNull">无</el-checkbox>
        </div>
        <div class="right-div">
          <el-row :gutter="20" v-for="(item, index) in tempOpen.HPI.treatment.data" :key="index">
            <el-col :span="4">
              <el-select filterable :disabled="tempOpen.HPI.treatment.ifNull" size="medium" v-model="item.display" placeholder="症状表现">
                <el-option v-for="(e, i) in dict.simple.DTMPI020" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select filterable :disabled="tempOpen.HPI.treatment.ifNull" size="medium" v-model="item.method" placeholder="治疗手段" @change="methodChange(item)">
                <el-option v-for="(e, i) in dict.simple.DTMPI030" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select filterable :disabled="tempOpen.HPI.treatment.ifNull" size="medium" v-model="item.measure" placeholder="治疗措施">
                <el-option v-if="item.method == 'D.104.100001'" v-for="(e, i) in dict.simple.DTMPI040" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
                <el-option v-if="item.method == 'D.104.100002'" v-for="(e, i) in dict.simple.DTMPI045" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select filterable :disabled="tempOpen.HPI.treatment.ifNull" size="medium" v-model="item.effect" placeholder="治疗效果">
                <el-option v-for="(e, i) in dict.simple.DTMPI050" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3">
              <el-input :disabled="tempOpen.HPI.treatment.ifNull" @focus="showKeyboard" placeholder="持续时间" size="medium" v-model="item.duration"></el-input>
            </el-col>
            <el-col :span="3">
              <el-select filterable :disabled="tempOpen.HPI.treatment.ifNull" size="medium" v-model="item.unit" placeholder="时间单位">
                <el-option v-for="(e, i) in dict.simple.DTMCC050" :key="i" :label="e.itemName" :value="e.itemCode"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-button :disabled="tempOpen.HPI.treatment.ifNull" icon="el-icon-minus" size="medium" @click="remove(index)"></el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-button :disabled="tempOpen.HPI.treatment.ifNull" icon="el-icon-plus" size="medium" @click="add()"></el-button>
          </el-row>
        </div>
        <keyboard ref="k1" :targetEvent="targetEvent" @stopHidden="stopHidden" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'
import { parseChiefComplaint } from '@/utils/index'
import keyboard from "@/components/Keyboard"

export default {
  name: 'HPI',
  components: {
    keyboard
  },
  data() {
    return {
      activeNames: ['0'],
      targetEvent: null,
      measureOptions: []
    }
  },
  methods: {
    parseChiefComplaint,
    methodChange(item) {
      item.measure = ''
    },
    showKeyboard(event) {
      let rect = event.target.getBoundingClientRect()
      if (this.targetEvent) {
        let _rect = this.targetEvent.target.getBoundingClientRect()
        if (rect.x == _rect.x && rect.y == _rect.y) {
          this.$refs.k1.$el.style.visibility = 'visible'
          return
        }
      }
      this.targetEvent = event
      this.$refs.k1.$el.style.top = (rect.y - 20) + 'px'
      this.$refs.k1.$el.style.left = rect.x + 'px'
      this.$refs.k1.$el.style.visibility = 'visible'
    },
    stopHidden() {
      this.clickFlag = true
    },
    remove(index) {
      this.tempOpen.HPI.treatment.data.splice(index, 1)
    },
    add() {
      this.tempOpen.HPI.treatment.data.push({})
    }
  },
  computed: {
    ...mapGetters([
      'tempOpen',
      'dict',
      'dictIndex'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .red {
    color: red;
  }
  .left-div {
    width: 15%;
    background-color: #fafafc;
    padding: 10px;
  }
  .right-div {
    width: 85%;
    padding: 10px;
  }
  .row-div {
    display: flex;
    border-bottom: 1px solid #d8dde2;
  }
  .card-div {
    padding: 0 5px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
  }
  .el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .align-right {
    text-align: right;
  }
</style>